<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div>
    <el-alert type="success" :closable="false" style="margin-bottom: 10px">
      <template #default>
        <el-space wrap>
          <slot name="extra-l"></slot>
        </el-space>
        <el-space wrap>
          <slot name="extra-r"></slot>
        </el-space>
      </template>
    </el-alert>
    <el-table
      :data="_data"
      v-bind="$attrs"
      :ref="selection.elTableRef"
      :row-key="props.rowKey"
      v-loading="loading"
      @selection-change="selection.handleSelectionChange"
    >
      <el-table-column
        v-if="props.selectedKeys && props.showSelection"
        type="selection"
        :width="props.selectWidth"
        :reserve-selection="props.keepSelection"
      />
      <el-table-column
        type="index"
        :width="props.numberWidth"
        label="序号"
        #default="{ $index }"
        v-if="props.showNumber"
      >
        {{ renderIndex($index) }}
      </el-table-column>
      <template v-for="_column in props.columns" :key="_column.key">
        <el-table-column
          :prop="_column?.key"
          :label="_column?.label"
          :width="_column?.width"
          v-bind="_column"
        >
          <!-- $slots[column.key]检测是否使用插槽， -->
          <template v-if="$slots[_column.key]" #default="{ row, $index }">
            <slot
              :name="_column.key"
              :row="row"
              :index="$index"
              :value="getVal(row, _column.key)"
            />
          </template>
          <template v-if="_column.showTooltip" #default="{ row }">
            <ToopTip :_column="_column" :row="row" />
          </template>
        </el-table-column>
      </template>
    </el-table>

    <!-- 分页器 -->
    <div class="pagination_box" v-if="props.paginationConfig">
      <el-pagination
        background
        v-model:currentPage="paramsConfigs.pageNo"
        v-model:page-size="paramsConfigs.pageSize"
        :page-sizes="props.psges.pageSizes"
        layout="total, sizes, prev, pager, next, jumper"
        :total="httpTotal || paginationData.length || 0"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

import tableProps, { tableEmit } from './table'

import { useTableHttp, usePagination, useSelection } from './hooks'

import { getVal } from '@/utils'

import ToopTip from './ToopTip.vue'

const props = defineProps(tableProps)
const emits = defineEmits(tableEmit)

const { paramsConfigs, indexStart, paginationData } = usePagination(props)

const { httpData, httpTotal, loading } = useTableHttp(
  props,
  paramsConfigs,
  () => {
    emits('update:isReload', false)
  }
)

const _data = computed(() => httpData.value || paginationData.value)

const selection = useSelection(props, _data, (selectedKeys: number[]) => {
  emits('update:selectedKeys', selectedKeys)
})

const renderIndex = (index: number) => {
  return Number(indexStart.value + index + 1) < 10
    ? '0' + (indexStart.value + index + 1)
    : indexStart.value + index + 1
}

defineOptions({
  name: 'CETable'
})
</script>

<style scoped lang="scss">
:deep(.el-table__header th) {
  color: #5a5a5a;
  background-color: #fafafa;
  border-top: 1px solid #ebeef5;
}

:deep(.el-table__header th:last-child) {
  border-right: 1px solid #ebeef5;
}

:deep(.el-table__header th:first-child) {
  border-left: 1px solid #ebeef5;
}

:deep(.el-table__body tr) {
  height: 48px;
}

:deep(.el-table__header tr) {
  height: 48px;
}
:deep(.el-table) {
  width: 100%;
}

.pagination_box {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.c-table__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
</style>
